﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>触新你的生活</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="telephone=no">
    <meta name="robots" content="all">
    <meta name="Language" content="zh-CN" />
    <meta name="publisher" content="矩阵互动www.juzhen.com">
    <link rel="stylesheet" href="style/my.css">
    <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="style/animate.css">
    <link rel="stylesheet" href="style/swiper.min.css">
    <script src="script/jquery-1.8.3.min.js"></script>
    <script src="script/swiper.animate1.0.2.min.js"></script>
    <script src="script/swiper.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="script/AjaxMethods.js"></script>
    <script type="text/javascript" src="script/WxOAuth_by4.js"></script>
    <script type="text/javascript" src="script/init.js"></script>
    <script type="text/javascript" src="http://weixin.juzhen.com/WebServices/matrix.weixin.auth.2.3.js"></script>
    <script type="text/javascript" src="http://weixin.juzhen.com/WebServices/matrix.weixin.share.2.0.1.js"></script>
    <script type="text/javascript " src="script/index.js "></script>
    <script type="text/javascript">
        /*实施改变html的fontSize值*/
        (function(doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 50 * (clientWidth / 320) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
        /* 判断横竖屏 */
        function orientationChange() {
            switch (window.orientation) {
                case 0:
                    break;
                case -90:
                    alert("请竖屏查看页面，效果更佳");
                    break;
                case 90:
                    alert("请竖屏查看页面，效果更佳");
                    break;
                case 180:
                    break;
            };
        };
        /* 添加事件监听 */
        addEventListener('load', function() {
            orientationChange();
            window.onorientationchange = orientationChange;
        });
        var state

        function load(manifest, callback) {
            for (var i = 0; i < manifest.length; i++) {
                var images = [];
                var count = 0;
                images[i] = new Image();
                images[i].src = "images/" + manifest[i].src;
                images[i].classname = manifest[i].class;
                images[i].onload = function() {
                    count++;
                    var itemClass = this.classname;
                    //进度
                    var progress = parseInt((count / manifest.length) * 100);
                    $("#loadTxt").text(progress + "%");
                    if (itemClass) {
                        var w = this.width / 100 + "rem";
                        $("." + itemClass).width(w);
                        $("." + itemClass).attr("src", this.src);
                    }
                    if (count >= manifest.length) {
                        callback();
                    }
                }
            }
        }

        document.addEventListener('DOMContentLoaded', function(event) {
            load(manifest, function() {
                setTimeout(function() {
                    getUserInfo()
                    state = $('#loadDiv').attr('state');
                    var sUserAgent = navigator.userAgent.toLowerCase();
                    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
                    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
                    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
                    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
                    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
                    var bIsAndroid = sUserAgent.match(/android/i) == "android";
                    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
                    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
                    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid ||
                        bIsCE || bIsWM) {
                        if (window.location.href.indexOf('ydManaPho/index.html') == -1) {
                            if (state != 3) {
                                $("#loadDiv").fadeOut();
                                $(".index").fadeIn();
                                runswiper()
                            } else {
                                $('#loadDiv').fadeOut();
                                $('.from4').fadeIn();
                            }

                        }
                        setTimeout(function() {
                            changeShare("");
                        }, 500);
                        console.log("手机端");
                    } else {
                        if (window.location.href.indexOf('ydManage/index.html') == -1) {
                            alert('请在移动设备打开此活动')
                        }
                        console.log("PC端");
                    }
                }, 0);
            })
        })
    </script>
</head>

<body>
    <!-- loading -->
    <div id="loadDiv">
        <div class="page1"></div>
        <img class="logo1" />
        <img class="load1 g_center" src="images/load1.png">
        <div id="loadTxt" class="">0%</div>
    </div>

    <img src="images/music.png" class="audio reg " onclick="change()">
    <audio loop preload="auto" controls hidden id='music' src="images/1.mp3"></audio>

    <!-- 首页 -->
    <div class="index dn">
        <div class="swiper-container" style="display: block;">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="page1"></div>
                    <img class="logo1">
                    <img class="p1_img1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
                    <img class="p1_img2 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="2s">
                    <img class="p1_img3 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="3s">
                    <img class="p1_img4  ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="4s">
                    <img class="p1_img5  ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="5s">
                    <img class="p1_img6  ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="6s">
                    <img class="p1_img7 t_center ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="7s">
                    <img class="logo2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="8s">
                    <img class="jt">
                </div>
                <div class="swiper-slide">
                    <div class="page2"></div>
                    <img class="logo1">
                    <img class="p2_img1  ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
                    <img class="p2_img2 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="2s">
                    <img class="p2_img3  ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="3s">
                    <img class="p2_img4  ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="4s">
                    <img class="p2_img5  ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="5s">
                    <img class="p2_img6  ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="6s">
                    <div class="ani go_btn1" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="7s">
                        <div class="go_btn pulse animatedd infinite"></div>
                    </div>
                    <img class="p2_img8  ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="8s">
                    <img class="logo2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="9s">
                </div>
            </div>
        </div>
    </div>

    <!-- 表单1 dn-->
    <div class="from1 dn">
        <!-- <div class="from"></div> -->
        <img class="logo1">
        <div class="from1_box g_center">
            <!--   运动项目 -->
            <div class="box1">
                <div data-name="A 跑步" class="btn" style="margin:0 0.22rem 0 0.325rem;">
                    <div class=" div_on dn "></div>
                </div>
                <div data-name="B 游泳 " class="btn " style="margin-right: 0.225rem; ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="C 瑜伽 " class="btn " style="margin-right: 0.22rem; ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="D HIT " class="btn ">
                    <div class="div_on dn "></div>
                </div>
            </div>
            <!-- 绘画风格 -->
            <div class="box2 ">
                <div data-name="A 水墨画 " class="btn " style="width: 22%;margin:0 0.233rem 0 0.325rem;">
                    <!--class dn -->
                    <div class="div_on dn "></div>
                </div>
                <div data-name="B 油画 " class="btn " style="width: 17%;margin-right: 0.36rem; ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="C 素描 " class="btn " style="width: 17%;margin-right: 0.2345rem; ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="D 水粉画 " class="btn " style="width: 22%; ">
                    <div class="div_on dn "></div>
                </div>
            </div>
            <!-- 书 -->
            <div class="box3 ">
                <div data-name="A 哲学 " class="btn " style="width: 22%;margin:0 1.135rem 0 0.325rem;">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="B 经济学/社会学 " class="btn ">
                    <div class="div_on dn " style="margin-top: .21rem; "></div>
                </div>
                <div data-name="C 文学 " class="btn " style="width: 22%;margin:0 1.135rem 0 0.325rem;">
                    <div class="div_on dn " style="margin-top: .19rem; "></div>
                </div>
                <div data-name="D 心理学 " class="btn ">
                    <div class="div_on dn " style="margin-top: .19rem; "></div>
                </div>
            </div>
        </div>
        <img class="logo2 ">
    </div>

    <!-- 表单2 -->
    <div class="from2 dn">
        <!-- <div class="from "></div> -->
        <img class="logo1 ">
        <div class="from2_box g_center ">
            <!-- 手作类型 -->
            <div class="box4 ">
                <div data-name="A 香氛类 " class="btn ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="B 甜品类 " class="btn " style="margin: 0; ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="C 工艺类 " class="btn ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="D 盆植类 " class="btn " style="margin: 0; ">
                    <div class="div_on dn "></div>
                </div>
            </div>
            <!-- 互动类型 -->
            <div class="box5">
                <div data-name="A 艺术画展 " class="btn ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="B 书籍售卖 " class="btn " style="margin: 0; ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="C 公众演讲 " class="btn ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="D 话剧演出 " class="btn " style="margin: 0; ">
                    <div class="div_on dn "></div>
                </div>
            </div>
            <!-- 品鉴会 -->
            <div class="box6 ">
                <div data-name="A 经典红酒 " class="btn ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="B 精品雪茄 " class="btn " style="margin: 0; ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="C 中国珍茶 " class="btn ">
                    <div class="div_on dn "></div>
                </div>
                <div data-name="D 手磨咖啡 " class="btn " style="margin: 0; ">
                    <div class="div_on dn "></div>
                </div>
            </div>
        </div>
        <img class="logo2 ">
    </div>

    <!-- 表单3 -->
    <div class="from3 dn ">
        <!-- <div class="from "></div> -->
        <img class="logo1 ">
        <div class="page5 "></div>
        <img class="p5_img1 fadeInDown animated delay1 ">
        <img class="p5_img2 fadeInDown animated delay2 ">
        <img class="p5_img3 fadeInDown animated delay3 ">
        <img class="p5_img4 fadeInDown animated delay4 ">
        <img class="p5_img5 fadeInDown animated delay5 ">
        <img class="p5_img6 fadeInDown animated delay6 ">
        <img class="p5_img7 fadeInDown animated delay7 ">
        <img class="p5_img8 fadeInDown animated delay8 ">
        <img class="p5_img9 fadeInDown animated delay9 ">
        <div class="btn fadeIn animated delay10 ">
            <img class="p5_btn1 pulse animatedd infinite submit_btn p5btn delay10 ">
            <img class="p5_btn2 pulse animatedd infinite submit_btn p5btn delay10 ">
        </div>
        <img class="logo2 fadeIn animated delay11 ">
    </div>
    </div>

    <!-- 表单4 -->
    <div class="from4 dn ">
        <!-- <div class="from "></div> -->
        <img class="logo1 ">
        <div class="from3_box ">
            <div class="page6 ">
                <input class="name " type="text " maxlength=8 ">
                    <input class="tel " type="tel " maxlength="11 ">
                    <input class="day " type="number " placeholder="(可选22-24) " maxlength="2 ">
                    <input class="adviser " type="text " maxlength="8 ">
                    <div class="submit_btn t_center " onclick="submit() ">
                        <img class="p6_btn ">
                    </div>
                </div>
            </div>
            <img class="logo2 ">

        </div>

        <!-- 表单5 -->
        <div class="from5 dn ">
            <!-- <div class="from "></div> -->
            <img class="logo1 ">
            <div class="page1 "></div>
            <img class="p7_img1 fadeInDown duration delay1 ">
            <img class="p7_img2 fadeInDown duration delay2 ">
            <img class="p7_img3 fadeInDown duration delay3 ">
            <img class="p7_img4 fadeInDown duration delay4 ">
            <img class="p7_img5 fadeInDown duration delay5 ">
            <img class="p7_img6 fadeInDown duration delay6 ">
            <img class="p7_img7 fadeInDown duration delay7 ">
    
            <img class="logo2 fadeIn animatedd delay8 ">
        </div>
</body>

<script>
    function popShow(id) {
        $(id + " ").fadeIn();
    }

    function popHide(id) {
        $(id + " ").fadeOut();
    }

    manifest = [{
        src: "loading.gif ",
        class: "loading "
    }, {
        src: "logo1.png ",
        class: "logo1 "
    }, {
        src: "icon.png ",
        class: "icon "
    }, {
        src: "load1.png ",
        class: "load1 "
    }, {
        src: "logo2.png ",
        class: "logo2 "
    }, {
        src: "jt.png ",
        class: "jt "
    }, {
        src: "p1_img1.png ",
        class: "p1_img1 "
    }, {
        src: "p1_img2.png ",
        class: "p1_img2 "
    }, {
        src: "p1_img3.png ",
        class: "p1_img3 "
    }, {
        src: "p1_img4.png ",
        class: "p1_img4 "
    }, {
        src: "p1_img5.png ",
        class: "p1_img5 "
    }, {
        src: "p1_img6.png ",
        class: "p1_img6 "
    }, {
        src: "p1_img7.png ",
        class: "p1_img7 "
    }, {
        src: "p2_img1.png ",
        class: "p2_img1 "
    }, {
        src: "p2_img2.png ",
        class: "p2_img2 "
    }, {
        src: "p2_img3.png ",
        class: "p2_img3 "
    }, {
        src: "p2_img4.png ",
        class: "p2_img4 "
    }, {
        src: "p2_img5.png ",
        class: "p2_img5 "
    }, {
        src: "p2_img6.png ",
        class: "p2_img6 "
    }, {
        src: "p2_img7.png ",
        class: "p2_img7 "
    }, {
        src: "p2_img8.png ",
        class: "p2_img8 "
    }, {
        src: "p5_img1.png ",
        class: "p5_img1 "
    }, {
        src: "p5_img2.png ",
        class: "p5_img2 "
    }, {
        src: "p5_img3.png ",
        class: "p5_img3 "
    }, {
        src: "p5_img4.png ",
        class: "p5_img4 "
    }, {
        src: "p5_img5.png ",
        class: "p5_img5 "
    }, {
        src: "p5_img6.png ",
        class: "p5_img6 "
    }, {
        src: "p5_img7.png ",
        class: "p5_img7 "
    }, {
        src: "p5_img8.png ",
        class: "p5_img8 "
    }, {
        src: "p5_img9.png ",
        class: "p5_img9 "
    }, {
        src: "p5_btn1.png ",
        class: "p5_btn1 "
    }, {
        src: "p5_btn2.png ",
        class: "p5_btn2 "
    }, {
        src: "p6_img1.png ",
        class: "p6_img1 "
    }, {
        src: "p6_img2.png ",
        class: "p6_img2 "
    }, {
        src: "p6_btn.png ",
        class: "p6_btn "
    },{
        src: "p7_img1.png ",
        class: "p7_img1 "
    }, {
        src: "p7_img2.png ",
        class: "p7_img2 "
    }, {
        src: "p7_img3.png ",
        class: "p7_img3 "
    }, {
        src: "p7_img4.png ",
        class: "p7_img4 "
    }, {
        src: "p7_img5.png ",
        class: "p7_img5 "
    }, {
        src: "p7_img6.png ",
        class: "p7_img6 "
    }, {
        src: "p7_img7.png ",
        class: "p7_img7 "
    }, ]
</script>
<script>
    //去答题
    $('.go_btn').on('click', function() {
            $('.index').fadeOut()
            $('.from1').fadeIn();
        })
        //是否参加邀请
    $('.p5_btn1').on('click', function() {
        $('.submit_btn').attr('participate', 1)
        $('.from3').fadeOut()
        $('.from4').fadeIn();
    })
    $('.p5_btn2').on('click', function() {
            $('.submit_btn').attr('participate', 0)
            $('.from3').fadeOut()
            $('.from4').fadeIn();
        })
        //1
    var q1 = ''
    $('.box1 div').on('click', function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').children().fadeOut();
            q1 = ''
        } else {
            $(this).addClass('on').children().fadeIn();
            $(this).siblings().removeClass('on').children().fadeOut();
            q1 = $(this).data('name')
        }
        yanzheng1()
        console.log('q1=' + q1)
    })

    //2
    var q2 = ''
    $('.box2 div').on('click', function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').children().fadeOut();
            q2 = ''
        } else {
            $(this).addClass('on').children().fadeIn();
            $(this).siblings().removeClass('on').children().fadeOut();
            q2 = $(this).data('name')
        }
        yanzheng1()
        console.log('q2=' + q2)
    })

    //3
    var q3 = ''
    $('.box3 div').on('click', function() {
            if ($(this).hasClass('on')) {
                $(this).removeClass('on').children().fadeOut();
                q3 = ''
            } else {
                $(this).addClass('on').children().fadeIn();
                $(this).siblings().removeClass('on').children().fadeOut();
                q3 = $(this).data('name')
            }
            yanzheng1()
            console.log('q3=' + q3)
        })
        //下一页验证
    function yanzheng1() {
        for (var i = 0; i < 4; i++) {
            if ($('.box1 div').eq(i).hasClass('on')) {
                q1 = $('.box1 div').eq(i).attr('data-name')
                console.log('q1=' + q1)
            }
        }
        for (var i = 0; i < 4; i++) {
            if ($('.box2 .btn').eq(i).hasClass('on')) {
                q2 = $('.box2 .btn').eq(i).attr('data-name') + ' '
                console.log('q2=' + q2)
            }
        }
        for (var i = 0; i < 4; i++) {
            if ($('.box3 .btn').eq(i).hasClass('on')) {
                q3 = $('.box3 .btn').eq(i).attr('data-name') + ''
                console.log('q3=' + q3)
            }
        }
        //判断
        if (q1 == '' || q2 == '' || q3 == '') {
            return;
        } else {
            $('.from1').fadeOut();
            $('.from2').fadeIn();
        }
    }
    //4
    var q4 = ''
    $('.box4 div').on('click', function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').children().fadeOut();
            q4 = ''
        } else {
            $(this).addClass('on').children().fadeIn();
            $(this).siblings().removeClass('on').children().fadeOut();
            q4 = $(this).data('name')
        }
        yanzheng2()
        console.log('q4=' + q4)
    })

    //5
    var q5 = ''
    $('.box5 div').on('click', function() {
            if ($(this).hasClass('on')) {
                $(this).removeClass('on').children().fadeOut();
                q5 = ''
            } else {
                $(this).addClass('on').children().fadeIn();
                $(this).siblings().removeClass('on').children().fadeOut();
                q5 = $(this).data('name')
            }
            yanzheng2()
            console.log('q5=' + q5)
        })
        //6
    var q6 = ''
    $('.box6 div').on('click', function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').children().fadeOut();
            q6 = ''
        } else {
            $(this).addClass('on').children().fadeIn();
            $(this).siblings().removeClass('on').children().fadeOut();
            q6 = $(this).data('name')
        }
        yanzheng2()
        console.log('q6=' + q6)
    });
    //下一页验证
    function yanzheng2() {
        for (var i = 0; i < 4; i++) {
            if ($('.box4 div').eq(i).hasClass('on')) {
                q4 = $('.box4 div').eq(i).attr('data-name')
                console.log('q4=' + q4)
            }
        }
        for (var i = 0; i < 4; i++) {
            if ($('.box5 .btn').eq(i).hasClass('on')) {
                q5 = $('.box5 .btn').eq(i).attr('data-name') + ' '
                console.log('q5=' + q5)
            }
        }
        for (var i = 0; i < 4; i++) {
            if ($('.box6 .btn').eq(i).hasClass('on')) {
                q6 = $('.box6 .btn').eq(i).attr('data-name') + ''
                console.log('q6=' + q6)
            }
        }
        //判断
        if (q4 == '' || q5 == '' || q6 == '') {
            return;
        } else {
            $('.from2').fadeOut();
            $('.from3').fadeIn();
            $('.from3 img').css('visibility', 'visible')
        }
    }
</script>
<script>
    var swiper;

    function runswiper() {
        swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            touchRatio: 0.1,
            onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
                swiperAnimateCache(swiper); //隐藏动画元素 
                swiperAnimate(swiper); //初始化完成开始动画
            },
            onSlideChangeEnd: function(swiper) {
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            }
        })
    }
</script>

<script type="text/javascript " src="script/common.js "></script>

</html>